<template>
  <div class="box-content">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <Search ref="topSearch" class="search" placeholder="盘点单号" :isAdd="true" :isScreen="true" :isType="true" @onSearch="onSearch" @onScreen="onScreen" @add="goAdd">
    </Search>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item @change="changed1" v-model="params.inventoryStatus" :options="options1" />
      <van-dropdown-item @change="changed2" v-model="params.inventoryType" :options="options2" />
      <van-dropdown-item @change="changed3" v-model="params.warehouseId" :options="options3" />
    </van-dropdown-menu>
    <search-tag ref="SearchTag" :propsForSon="propsForSon" @getCategory="getCategory" v-show="showSearchTag"></search-tag>

    <!--分页列表 -->
    <div class="listBox" :style="{height: GLOBAL.currentEnvironment ? 'calc(100vh-1rem)' : 'calc(100vh - 1.5rem)'}">
      <pageList ref="pageList" :checkedShow="checkedShow" :operationTxt="operationTxt" :columns="columns" :listUrl="listUrl" @getCheckedValue="getCheckedValue"
        @handleList="handleList">
        <div slot="label" slot-scope="{item}" class="labelBox">
          <div class="itemLabel">{{item.inventoryTypeTxt}}</div>
          <div class="itemLabel">{{item.inventoryStatusTxt}}</div>
          <div class="itemLabel" v-if="item.flowStatusText">{{item.flowStatusText}}</div>
        </div>
        <div v-if="asyncBtn(item)" slot="foot" slot-scope="{ item }" class="foot-slot">
          <span></span><span @click.stop="operationItem(item)">{{ asyncBtn(item) }}</span>
        </div>
      </pageList>
    </div>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import {
  getDictModel,
  wmsWarehouseInventoryGetStatusList,
  WarehouseQueryList,
} from "@/api/system";
export default {
  name: "carRoomList",
  components: { Navbar, TabBar, pageList, Search, SearchTag },
  data() {
    return {
      title: "库存盘点",
      rtitle: "",
      rname: "", //search
      active: "0",
      checkedShow: false, //列表是否支持选择
      operationTxt: "", //选择按钮名称
      listUrl: "/wms/wmsWarehouseInventory/list", //列表接口
      columns: {
        titleKey: "warehouseName", //标题
        // subtitleKey: "goodsName",//副标题
        content: [
          //内容
          {
            name: "盘点单",
            key: ["inventoryCode"],
          },
          {
            name: "盘点人",
            key: ["inventoryUser"],
          },
        ],
        labelKey: ["inventoryTypeTxt", "inventoryStatusTxt", "flowStatusText"], //标签
        // operation: [],
        // operationText: '',
      },
      showSearchTag: false,
      keyword: "",
      params: {
        inventoryStatus: "",
        inventoryType: "",
        warehouseId: "",
      },
      options1: [],
      options2: [],
      options3: [],
      propsForSon: {},
    };
  },
  beforeRouteLeave(to, from, next) {
    let that = this;
    switch (true) {
      case that.showSearchTag:
        that.showSearchTag = false;
        this.title = "库存盘点";
        next(false);
        break;
      case !that.showSearchTag:
        next();
        break;
    }
  },
  computed: {},
  mounted() {
    this.searchQuery();
  },
  created() {
    wmsWarehouseInventoryGetStatusList().then((res) => {
      if (res.code == 200) {
        this.options1 = [{ text: "盘点状态", value: "" }];
        this.options1 = this.options1.concat(res.result);
        this.$refs.SearchTag.options1 = this.options1;
      }
    });
    getDictModel({ dictCode: "inventory_type" }).then((res) => {
      if (res.code == 200) {
        this.options2 = [{ text: "盘点类型", value: "" }];
        this.options2 = this.options2.concat(res.result);
        this.$refs.SearchTag.options2 = this.options2;
      }
    });
    WarehouseQueryList().then((res) => {
      if (res.code == 200) {
        this.options3 = [{ text: "盘点仓库", value: "" }];
        this.options3 = this.options3.concat(res.result);
        this.$refs.SearchTag.options3 = this.options3;
      }
    });
  },
  methods: {
    // 新建
    goAdd() {
      console.log("aadddd");
      this.$router.push({
        path: "/stockCheckForm",
        query: {
          type: 0,
        },
      });
    },
    // 列表操作
    operationItem(v) {
      console.log(v, "aaaaa");
      this.$router.push({
        path: "/stockCheckForm",
        query: {
          id: v.id,
          type: 1,
        },
      });
    },
    // 动态操作按钮
    asyncBtn(item) {
      if (item.inventoryStatus == "running") {
        return "继续盘点";
      } else {
        return "";
      }
    },
    // 筛选条件改变
    changed1(v) {
      this.options1.forEach((item) => {
        if (item.value == v) {
          this.params.inventoryStatusText = v ? item.text : "";
        }
      });
      this.searchQuery();
    },
    changed2(v) {
      this.options2.forEach((item) => {
        if (item.value == v) {
          this.params.inventoryTypeText = v ? item.text : "";
        }
      });
      this.searchQuery();
    },
    changed3(v) {
      this.options3.forEach((item) => {
        if (item.value == v) {
          this.params.warehouseText = v ? item.text : "";
        }
      });
      this.searchQuery();
    },
    // 模糊查询
    onSearch(v) {
      this.keyword = this.$refs.topSearch.value;
      console.log(this.keyword, "1233");
      this.searchQuery();
    },
    // 高级筛选-打开
    onScreen() {
      console.log("筛选");
      this.keyword = this.$refs.topSearch.value;
      this.propsForSon = {
        ...this.params,
      };
      this.propsForSon.keyword = this.keyword;
      this.showSearchTag = true;
      this.title = "更多筛选";
    },
    // 高级筛选-确定筛选
    getCategory(p, k) {
      this.params = p;
      this.keyword = k;
      this.showSearchTag = false;
      console.log(this.params);
      this.$refs.topSearch.value = k;
      this.title = "库存盘点";
      this.searchQuery();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    //列表点击事件
    handleList(id, item, type) {
      console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
      this.$router.push({
        path: "/stockCheckDetail",
        query: {
          id: id,
        },
      });
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery() {
      // 搜索条件
      let queryParam = {
        ...this.params,
      };
      queryParam.keyword = this.keyword;
      this.$refs.pageList.searchQuery(queryParam);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.foot-slot {
  display: flex;
  justify-content: space-between;
  font-size: 0.14rem;
  color: #1890ff;
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.labelBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  // top: 0.2rem;
  left: 0.15rem;
  margin-top: 0.12rem;
  .itemLabel {
    box-sizing: border-box;
    background: #f0f6fe;
    color: #1890ff;
    margin-right: 0.1rem;
    padding: 0.02rem 0.08rem;
    font-size: 0.11rem;
    border-radius: 0.03rem;
  }
}
</style>
